<template>
    <div class="container">
        <nav-bar>斗鱼TV</nav-bar>
        <div class="liveList" @scroll="scrollHandle">
            <div v-for="l in liveList">
                <img :src="l.room_src" alt="">
            </div>
            <p>上拉更多</p>
        </div>

    </div>
</template>

<script>
    import NavBar from './NavBar'
    import axios from 'axios'
    export default {
        name: 'home',
        components: {
            NavBar
        },
        data: function () {
            return {
                liveList: [],
                // 记录页号
                page: 0,
                // 记录是否正在加载更多
                isLoading: false
            }
        },
        mounted: function () {
            this.loadMore();
        },
        methods: {
            loadMore: function () {
                // 发请求，获取新数据
                axios.get('/api/RoomApi/live?offset=' + this.page * 30)
                    .then((res) => {
                        console.log(res.data.data);
                        // 数组拼接
                        this.liveList = this.liveList.concat(res.data.data);
                        this.isLoading = false;
                    })
                    .catch((error) => {

                    })
            },
            scrollHandle: function (event) {
                if (this.isLoading) {
                    // 如果正在加载更多,滚动的时候应该没有操作
                    // 否则滚动到底部时发送多个请求
                    return;
                }
                // console.log('--=====');
                // console.log(event);
                // 滚动到底部的时候,获取新数据
                // 内容的高度-容器的高度
                // console.log(event.target.offsetHeight);
                // console.log(event.target.scrollHeight);
                // console.log(event.target.scrollTop);

                if (event.target.scrollTop > event.target.scrollHeight - event.target.offsetHeight - 10) {
                    console.log('马上到底部了');
                    this.isLoading = true;
                    this.page++;
                    console.log(this.page);
                    this.loadMore();
                }
            }
        }
    }

</script>

<style scoped>
    .liveList {
        height: 100%;
        overflow: scroll;
    }
    
    .container {
        height: 100%;
        padding-top: 64px;
    }
</style>